<template>
  <div class="portlet-cm-page">
    <div class="content">
      <div class="head">
        <!--                <div v-if="searchFun.openStat">-->
        <span>名称:</span>
        <a-input v-model:value="searchFun.searchInfo.name" style="width: 120px; margin: 0 15px"></a-input>
        <!--                </div>-->
        <a-button type="primary" @click="searchFun.searchClick">
          <search-outlined />
          查询
        </a-button>
        <a-button style="margin: 0 15px" @click="searchFun.reset">重置</a-button>
        <!--                <a-button @click="searchFun.open" type="link">-->
        <!--                    {{searchFun.openStat ? '合并':'展开'}}-->
        <!--                    <down-outlined v-if="!searchFun.openStat"/>-->
        <!--                    <up-outlined v-else/>-->
        <!--                </a-button>-->
      </div>
      <div class="middle">
        <div style="display: flex; justify-content: space-between; width: 100%; margin-bottom: 15px">
          <a-button v-show="!iAmComponent" type="primary" @click="cli_add">
            <plus-outlined />
            新增
          </a-button>
        </div>
        <div v-show="layoutswitch" class="permission-page-table">
          <a-table
            :columns="columns"
            :data-source="portComList"
            :loading="tableLoading"
            :pagination="false"
            :scroll="{ y: tableHeight }"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'option'">
                <div style="display: flex; align-items: center">
                  <!--                  <a-button type="link" @click="cli_edit(record)">编辑</a-button>-->
                  <!--                  <a-button danger type="link" @click="cli_delete(record)">删除</a-button>-->
                  <a-button type="link" @click="cli_detail(record)">详情</a-button>
                  <linkButton :record-or-index="record" :use-item="2" @cli-edit="cli_edit" @cli-delete="cli_delete" />
                </div>
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <div class="foot">
        <a-pagination
          v-model:current="pagFun.pagInfo.pageNo"
          show-quick-jumper
          :total="pagFun.pagInfo.total"
          :responsive="false"
          @change="pagFun.onChange"
        />
      </div>
    </div>
  </div>
  <com_edit
    :is-show-edit="isShowEdit"
    :is-edit="isEdit"
    :is-detl="isDetl"
    :current-item-c="currentItem"
    @close-edit="closeEdit"
    @create-success="createSuccess"
    @update-success="updateSuccess"
  ></com_edit>
  <a-modal v-model:visible="deleteFun.isDelete" title="删除" @ok="delete_ok">
    {{ `确认删除 ${deleteFun.del_idx.name} 吗 ?` }}
  </a-modal>
</template>

<script setup>
import { watch, ref, reactive, onMounted, nextTick, defineProps, toRefs, defineEmits } from 'vue'
import { PlusOutlined, AppstoreOutlined, DatabaseOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import factory from './factory'
import com_edit from './edit/edit'
import linkButton from '@/components/linkButton'

// 组件在页面设计中复用
const props = defineProps({ iAmComponent: { type: Boolean, default: false } })
const { iAmComponent } = toRefs(props)
const emit = defineEmits(['iAmComponent_click'])
const iAmComponent_click = (item) => {
  emit('iAmComponent_click', item)
}
const portComList = ref([])
const tableLoading = ref(false)
/**==分页功能==========**/
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (page, pageSize) => {
    pagFun.pagInfo.pageNo = page
    pagFun.pagInfo.pageSize = pageSize
    getList()
  },
})
if (!portComList.value.length) {
  getList()
}

//==获取缩略图=======================
// import testimg from '@/assets/p1.png'
function getList(post = pagFun.pagInfo) {
  tableLoading.value = true
  portComList.value = []
  factory.searchLayoutList(post).then((res) => {
    tableLoading.value = false
    res.data.dataList.forEach((item, n) => {
      // item.smallImg = testimg
      portComList.value.push(item)
    })
    pagFun.pagInfo.total = Number(res.data.totalCount)
  })
}

//==表格================
const columns = ref([
  {
    title: '操作',
    key: 'option',
    width: 140,
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '更新人',
    dataIndex: 'modifierName',
    key: 'modifierName',
  },
  {
    title: '更新时间',
    dataIndex: 'modifyTime',
    key: 'modifyTime',
  },
])
const tableHeight = ref(332)
onMounted(() => {
  if (iAmComponent.value) return
  let ele = document.getElementsByClassName('portlet-cm-page')
  if (iAmComponent) {
    tableHeight.value = ele[0].offsetHeight - 55 - 10 - 30
  } else {
    tableHeight.value = ele[0].offsetHeight - 217
  }
})

/** 切换模式  **/
const layoutswitch = ref(iAmComponent.value ? false : true)

//==新增布局组件===============
const isShowEdit = ref(false)
const currentItem = ref({})
const isEdit = ref(0)
const isDetl = ref(false)
const cli_add = () => {
  currentItem.value = {}
  isEdit.value = 0
  isShowEdit.value = true
  isDetl.value = false
}
const cli_edit = (obj) => {
  currentItem.value = obj
  isEdit.value = 1
  isShowEdit.value = true
  isDetl.value = false
}
const cli_detail = (obj) => {
  currentItem.value = obj
  isEdit.value = 1
  isShowEdit.value = true
  isDetl.value = true
}
const closeEdit = () => {
  isShowEdit.value = false
}
const updateSuccess = (newItem) => {
  getList()
}
const createSuccess = (newItem) => {
  getList()
}

//==删除============================
const deleteFun = reactive({
  isDelete: false,
  del_idx: -1,
})
const cli_delete = (item) => {
  deleteFun.isDelete = true
  deleteFun.del_idx = item
}
const delete_ok = () => {
  factory.deletLayoutList(deleteFun.del_idx.id).then((res) => {
    deleteFun.isDelete = false
    getList()
  })
}

//鼠标移入移出
const mouseenter = (e) => {
  if (iAmComponent.value) {
    return
  }
  e.path[0].children[1].style.display = 'inherit'
}
const mouseleave = (e) => {
  e.path[0].children[1].style.display = 'none'
}

/***查询功能************************/
const searchFun = reactive({
  searchInfo: { name: '' },
  openStat: false,
  searchClick: () => {
    pagFun.pagInfo.pageNo = 1
    let pagInfo = pagFun.pagInfo
    let post = { pageNo: pagInfo.pageNo, pageSize: pagInfo.pageSize, name: searchFun.searchInfo.name }
    getList(post)
  },
  reset: () => {
    searchFun.searchInfo = { name: '', description: '', auth: '', userStat: '', address: '', type: '' }
  },
  open: () => {
    searchFun.openStat = !searchFun.openStat
  },
})
</script>

<style lang="less" scoped>
.home-portletManage {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 57px);
  overflow: auto;
  user-select: none;

  .suofangblock {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 10px;
    overflow: hidden;
    border: 1px solid black;
  }
}

.iAmComponent {
  height: calc(100% - 15px);
}

.portlet-cm-page {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #f5f8f9;

  .content {
    height: calc(100% - 0px);
    padding: 15px;
    background-color: white;

    .head {
      display: flex;
      font-size: 14px;
      line-height: 32px;
    }

    .middle {
      height: calc(100% - 88px);
      margin: 15px 0;
    }

    .foot {
      display: flex;
      justify-content: right;
    }
  }
}
</style>

<style lang="less">
.portlet-cm-page {
  .permission-page-table {
    .ant-tabs {
      padding: 0 !important;
    }

    .ant-btn-link {
      padding: 0 5px !important;
    }
  }
}
</style>
